import Vue from 'vue'

new Vue({
  el: "#root",
  template: `
    <div>
      <p>Name: {{name}}</p>
      <p>Name: {{getName()}}</p>
      <p>Number: {{number}}</p>
      <p>FullName: {{fullName}}</p>
      <p><input type="text" v-model="number"/></p>
      <p>FirstName: <input type="text" v-model="firstName"/></p>
      <p>LastName: <input type="text" v-model="lastName"/></p>
      <p>Nem: <input type="text" v-model="name"/> </p>
      <p>obj.a: <input type="text" v-model="obj.a"/> </p>
    </div>
  `,
  data:{
    firstName: 'Jocky',
    lastName: 'Lou',
    number: 0,
    fullName: '',
    obj: {
      a: 123
    }
  },
  // 依赖的值发生变化了以后会计算，然后缓存起来
  // 如果后面又变化了，重新计算然后再缓存起来
  // 不会重新计算，性能开销小
  computed: {
    // name () {
    //   console.log('new name')
    //   return `${this.firstName} ${this.lastName}`
    // },
    name: {
      // 想要获取的时候 做的是什么操作
      get(){
          console.log('get name')
          return `${this.firstName} ${this.lastName}`
      },

      // computed 是多重数据组合来的数据，
      // 可能会循环重复计算
      // set方法一般不推荐用，逻辑会很乱
      set(name){
          console.log('set name')
          const names = name.split(' ')
          this.firstName = names[0]
          this.lastName = names[1]
      }
    }
  },

  mounted(){
    this.obj = {
      a: '345'
    }
  },

  /////////////////////////////////////
  /////////////////////////////////////
  /////////////////////////////////////
  // 在computed 和 watch 中不要修改原来的
  // 任何属性，否则可能会无限循环
  // 里面的变化 会触发computed 和 watch
  // 反而会影响到外层，导致无限循环
  // watch 就是做监听的
  /////////////////////////////////////
  /////////////////////////////////////
  /////////////////////////////////////

  // 场景：监听到了一个值的变化 给后台发一个请求
  // 监听到了数据的变化，做响应
  watch: {

    // watch -> deep的用法
    // watch 一般只监听第一级，用了deep可以看到里面所有的属性
    // deep开销很大
    // obj: {
    //   handler (){
    //     console.log('obj.a changed')
    //   },
    //   immediate: true,
    //   deep: true
    // },

    // watch -> 不用 deep 的用法
    // watch 一般只监听第一级，用了deep可以看到里面所有的属性
    // deep开销很大
    'obj.a': {
      handler (){
        console.log('obj.a changed')
      },
      immediate: true
    },


    // firstName (newName, oldName) {
    //   console.log(`${newName} -> ${oldName}`)
    //   this.fullName = newName + ' ' + this.lastName;
    // }
      firstName: {
        handler (newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        },
        //声明了就立马赋值一次
        immediate: true
      }
  },



  //每次都更新不缓存，性能比computed差
  // 每次调用方法，都会执行
  methods: {
    getName(){
      console.log('getName invoked')
      return `${this.firstName} ${this.lastName}`
    }
  }
})
